@model OPLWeb.Models.ChatWrapper
@section LeftNav
{
    <ul id="nav-secondary">
        @if (Model.ChatHistory != null)
        {
            foreach (var item in Model.Users)
            {
            <li><a href="#">@item</a></li>
            }
        }
        else
        {
            <li class="first-top-left-corner"><a href="#">No one's around</a></li>
        
        }
        <li><a href="#">UserName:
            <input id="userName" type="text" style="width: 105px;" />
            <input id='startChat' type="button" value="go" /></a> </li>
    </ul>
}
<div id="content-wrapper-chat">
    <div id="content-main-feature">
        <img src="/content/images/newsheader.jpg" alt="News" width="800" height="50">
    </div>
    <div id="content-main">
        <div class="content-main-gutter">
            <div class="content-main-list-wrapper">
                <ul id="chatlist" class="content-list">
                    @if (Model.ChatHistory != null)
                    {
                        foreach (var item in Model.ChatHistory)
                        {
                        <li><a href="javascript:void(0);"><span class="cl-main">
                            <span class="span-h5">@item.UserId says..</span><span></span>
                            <div class="@item.Message newscontent" style="margin-left: 202px; display: none;">
                                @Html.Raw(HttpUtility.HtmlDecode(item.Message))
                            </div>
                            <span>@item.DateTime</span></span></a></li>
                        }
                    }
                    <li><a href="javascript:void(0);"><span class="searchresult_thumbnail">
                        <img src="/content/images/newsthumb.jpg" alt="Generic Action Shot2" width="100" height="79" />
                    </span><span class="cl-main">
                        <img src="/content/images/content-list-icon-article.png" alt="Match report" />
                        <span class="span-h5">No one online</span><span></span>
                        <div class="newscontent" style="margin-left: 202px; display: none;">
                            ...
                        </div>
                        <span></span></span></a></li>
                </ul>
            </div>
            <form id="send-message" action="#">
            <div id="message-box">
                <textarea id="new-message" autocomplete="off" accesskey="m" style="width: 710px;"></textarea>
                <input type="button" id="send" value="Send" class="send" style="float:right; height:41px;"/>
            </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#nav-main > li').each(function () {
            $(this).removeClass('active');
        });
        $('#news').addClass('active');
    });
</script>
